<script>
import SelectDict from "@/components/newAdd/selectDict.vue";
import request from "@/utils/request";
import { message } from 'ant-design-vue';

export default {
  name: 'addProjectModal',
  components: { SelectDict },
  data() {
    return {
      dialogFormVisible: false,
      formState: {
        cat: 'E',
        isB2B: 'N',
        defColor: 'Crimson'
      },
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
      otherData: {},
      rules: {
        projectName: [{ required: true, message: 'Please input project name', trigger: 'change' }],
      }
    }
  },
  methods: {
    show(data) {
      this.otherData = data
      this.otherData.month = data.month < 10 ? `0${data.month}` : data.month
      this.formState.geo = this.otherData.geo
      this.formState.rpp = this.otherData.rpp
      this.formState.ok2Ship = `${this.otherData.year}-${this.otherData.month}-01 12:00:00`.replace(" ", "T") + "Z"
      this.dialogFormVisible = true
    },
    edit(projectData) {
      this.formState = { ...projectData }
      this.dialogFormVisible = true
    },
    handleOk() {
      this.$refs.form.validate().then(res => {
        request({
          url: this.formState.projectId ? '/project/update' : '/project/add',
          method: 'post',
          data: this.formState
        }).then(response => {
          if (response.code === 200) {
            message.success(this.formState.projectId ? 'update success' : 'add success')
            this.$emit('success')
            this.dialogFormVisible = false
          } else {
            message.warning('add fail')
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
  }
}

/**
 * 还是得用数字字典来配，不然打包之后很难配
 * 或者就是开放到一个js中 ，然后在js中配
 * Project Name
 * Family
 * HW Dev
 * SW Dev
 * Network
 * B2B
 * Commercial Name
 * Default Color
 */
</script>

<template>
  <a-modal v-model:open="dialogFormVisible" title="Create New Project" @ok="handleOk">
    <a-form ref="form" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules">
      <a-form-item label="Project Name" name="projectName">
        <a-input v-model:value="formState.projectName" />
      </a-form-item>
      <a-form-item label="Family">
        <select-dict dict-code="catTypes" v-model:value="formState.cat" :empty-option="false"/>
      </a-form-item>
      <a-form-item label="HW Dev">
        <select-dict dict-code="devTypes" v-model:value="formState.dev"/>
      </a-form-item>
      <a-form-item label="SW Dev">
        <select-dict dict-code="swDevTypes" v-model:value="formState.swDev"/>
      </a-form-item>
      <a-form-item label="Network">
        <select-dict dict-code="networkTypes" v-model:value="formState.network"/>
      </a-form-item>
      <a-form-item label="B2B">
        <a-select v-model:value="formState.isB2B">
          <a-select-option value="N">N</a-select-option>
          <a-select-option value="Y">Y</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="Commercial Name">
        <a-input v-model:value="formState.cName" />
      </a-form-item>
      <a-form-item label="Default Color">
        <select-dict dict-code="defColors" v-model:value="formState.defColor"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped lang="scss">

</style>
